<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			span{
				display: inline-block;
				width: 100px;
				height: 100px;
				border: 1px solid #000;
			}
			div{
				height: 100px;
				border: 1px solid #000;
				
			}
			.hezi1{
				margin-right: 50px;
			}
			.hezi2{
				margin-left: 100px;
			}
			
			.box1{
				margin-bottom: 50px;
			}
			
			.box2{
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		
		<!-- 
		 
		 
		在默认布局的垂直方向上,默认情况下 外边距是不会叠加的
		会出现合并现象,谁的外边距比较大 就听谁的
		 
		 
		 -->
		<span class="hezi1">我是一个span</span><span class="hezi2">我是一个span</span>
		<div class="box1">我是一个div</div>
		<div class="box2">我是一个div</div>
	</body>
</html>